import React, { useState } from 'react';
import styles from './index.module.less';

const CodeInput: React.FC = () => {
  const numberKeys = [1, 2, 3, 4];
  const [codeArr, setCodeArr] = useState<string[]>([]);

  return (
    <div>
      <div className={styles.box}>
        {numberKeys.map((item, index) => {
          return <span>{codeArr[index]}</span>;
        })}
      </div>
      <button
        onClick={() => {
          if (codeArr.length < 4) {
            setCodeArr([...codeArr, '1']);
          }
        }}
      >
        1
      </button>
      <button
        onClick={() => {
          if (codeArr.length < 4) {
            setCodeArr([...codeArr, '2']);
          }
        }}
      >
        2
      </button>
      <button
        onClick={() => {
          console.log(codeArr);
        }}
      >
        确定
      </button>
      <button
        onClick={() => {
          codeArr.pop();
          setCodeArr([...codeArr]);
        }}
      >
        删除
      </button>
    </div>
  );
};

export default CodeInput;
